<template>
  <view class="sureorders">
    <view class="sureorders-top">
      <!-- 定位图标 -->
      <image class="sureorders-topphoto" src="../../static/定位.png" mode=""></image>
      <!-- 用户信息 -->
      <view class="sureorders-toptext">
        <text class="sureorders-toptext1">{{ nickName }}</text>
        <!-- 地址信息，这里为了示例，直接写死了，实际应用中可能需要从存储中获取 -->
        <text class="sureorders-toptext2">江苏省南京市玄武区中国南京软件谷XX路18号XX云楼N13食堂B1楼小厨娘</text>
      </view>
    </view>
    <scroll-view class="order-scroll" scroll-y="true">
      <view v-for="(product, index) in buyProducts" :key="index" class="order-item">
        <view class="order-list">
          <!-- 订单编号，示例中使用索引作为编号 -->
          <text class="order-number">订单编号: {{ 'OD' + (index + 1) }}</text>
          <!-- 商品图片 -->
          <image :src="product.url" class="order-item-image" mode="aspectFit"></image>
          <!-- 商品信息 -->
          <!-- 商品名称 -->
          <text class="order-item-name">{{ product.name }}</text>
          <!-- 商品描述 -->
          <text class="order-item-description">{{ product.description }}</text>
          <!-- 商品价格 -->
          <text class="order-item-price">￥{{ (product.price * product.quantity).toFixed(2) }}</text>
        </view>
      </view>
    </scroll-view>
    <!-- 订单商品列表 -->

    <view class="sureorders-bottom">
      <!-- 底部操作区域 -->
      <text class="sureorders-bottom-total">总计：￥{{ totalAmount }}</text>
      <button class="submit-order-btn" @click="submitOrder">提交订单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      buyProducts: [], // 存储购买商品数组
      nickName: '', // 存储昵称，假设在其他地方已经获取并设置了
      totalAmount: 0 // 总计金额
    };
  },
  onShow() {
    this.loadBuyProducts(); // 每次页面显示时加载商品数据
	    // 从本地存储中获取昵称
	    this.nickName = uni.getStorageSync('nickName') || '未登录';
  },
  methods: {
    loadBuyProducts() {
      this.buyProducts = wx.getStorageSync('buyProducts') || [];
      // 计算总价
      this.totalAmount = this.buyProducts.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2);
    },
    addToCart(product) {
      // 从本地存储中获取已存储的商品数组，如果没有则初始化为空数组
      let storedProducts = wx.getStorageSync('product') || [];

      // 寻找当前商品在数组中的索引
      const foundIndex = storedProducts.findIndex(item => item.id === product.id);

      // 如果找到了商品，增加其数量
      if (foundIndex !== -1) {
        storedProducts[foundIndex].quantity += 1;
      } else {
        // 如果没有找到，将新商品添加到数组中，并设置数量为1
        storedProducts.push({
          ...product,
          quantity: 1
        });
      }

      // 将更新后的商品数组存储回本地
      wx.setStorageSync('product', storedProducts);

      // 更新组件的 buyProducts 数据以触发视图更新
      this.buyProducts = storedProducts.filter(item => item.selected);
    },
    submitOrder() {
      // 将购买的商品数据存储在本地
      wx.setStorageSync('buyProducts', this.buyProducts);
      wx.setStorageSync('nickName', this.nickName);

      // 编码 buyProducts 数组为 JSON 字符串
      const encodedProducts = encodeURIComponent(JSON.stringify(this.buyProducts));
      const encodedNickName = encodeURIComponent(this.nickName);

      // 跳转到 newpay 页面，并带上所有数据作为查询参数
      wx.navigateTo({
        url: `/pages/newpay/newpay?products=${encodedProducts}&nickName=${encodedNickName}`,
        success: function() {
          console.log("成功跳转到 newpay.vue");
        },
        fail: function(err) {
          console.error("跳转到 newpay.vue 失败", err);
        }
      });
    }
  }
};
</script>

<style>
  .sureorders {
    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    position: relative;
    background-color: #f2f4f5; /* 背景颜色 */
    min-height: 100vh;
  }

  .sureorders-top {
    position: relative;
    border-radius: 30rpx;
    background-color: white;
    height: 140rpx;
    margin: 0 15rpx 0 15rpx;
    margin-top: 30rpx;
  }

  .sureorders-topphoto {
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    top: 35%;
    left: 20rpx;
  }

  .sureorders-toptext {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 20rpx;
  }

  .sureorders-toptext1 {
    padding-left: 80rpx;
    font-size: 30rpx;
  }

  .sureorders-toptext2 {
    padding-left: 80rpx;
    font-size: 20rpx;
  }

  .order-list {
    position: relative;
    border-radius: 30rpx;
    background-color: white;
    height: 350rpx;
    margin: 0 15rpx 0 15rpx;
    margin-top: 30rpx;
  }

  .order-item-image {
    position: absolute;
    width: 100%;
    border-radius: 10rpx;
    width: 250rpx;
    height: 250rpx;
    top: 20rpx;
    left: 10rpx;
  }

  .order-item-name {
    position: absolute;
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    top: 20rpx;
    padding-left: 300rpx;
  }

  .order-item-price {
    position: absolute;
    font-size: 30rpx;
    color: #e64340;
    bottom: 30rpx;
    right: 30rpx;
  }

  .order-item-description {
    position: absolute;
    font-size: 20rpx;
    color: #666;
    top: 130rpx;
    padding-left: 300rpx;
  }

  .order-number {
    font-size: 30rpx;
    position: absolute;
    bottom: 30rpx;
    left: 30rpx;
  }

  .sureorders-bottom {
    position: relative;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f4f5; /* 背景颜色 */
    height: 130rpx; /* 高度 */
    border-top: 1rpx solid grey; /* 上边框线 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.15); /* 阴影效果 */
    /* 确保没有其他背景颜色设置覆盖了按钮的背景色 */
  }

  .sureorders-bottom-total {
    position: absolute;
    color: red;
    font-size: 35rpx;
    left: 30rpx;
    top: 40rpx;
  }

  .submit-order-btn {
    position: absolute;
    right: 30rpx;
    background-color: #e64340; /* 确保红色背景 */
    color: white; /* 文字颜色 */
    font-size: 36rpx; /* 字体大小 */
    height: 70rpx; /* 高度 */
    line-height: 70rpx; /* 行高，使文本垂直居中 */
    text-align: center; /* 文本水平居中 */
    border-radius: 35rpx; /* 圆角 */
    padding: 0 40rpx; /* 左右内边距 */
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15); /* 按钮阴影 */
    /* 确保按钮的背景色不会被其他元素的背景色影响 */
  }

  .order-scroll {
    /* Set a large height to accommodate all order items */
    height: 900rpx; /* Adjust this value based on your content */
    overflow-y: scroll; /* Ensure vertical scrolling */
    margin-bottom: 200rpx; /* Make room for the fixed bottom bar */
  }
</style>